<template>
	<div>
		<div class="box">
			<uni-forms
				ref="form"
				:model="currentInfoData"
				validate-trigger="bind"
				:label-position="state == 'write' ? 'top' : 'left'"
				label-width="auto">
				<FromItem
					label="常规替车"
					:required="true"
					:state="state"
					name="substituteMaintenanceLevel">
					<ARadioGroup
						:dict="{
							list: dictList.substituteMaintenanceLevel,
						}"
						:state="state"
						@change="change_substituteMaintenanceLevel"
						v-model="
							currentInfoData.substituteMaintenanceLevel
						"></ARadioGroup>
				</FromItem>
				<FromItem
					v-if="currentInfoData.substituteMaintenanceLevel == '1'"
					label="维保替代车级别"
					:required="true"
					:state="state"
					name="substituteMaintenanceLevelType">
					<ASelectUni
						:dict="{
							list: planDicts.levelList,
							label: 'level',
							value: 'id',
						}"
						:state="state"
						v-model="
							currentInfoData.substituteMaintenanceLevelType
						"></ASelectUni>
				</FromItem>
				<FromItem
					v-if="currentInfoData.substituteMaintenanceLevel == '1'"
					label="维保替代车价格（月）"
					:required="true"
					:state="
						state == 'readonly'
							? 'readonly'
							: state_substituteMaintenanceRent
							? 'write'
							: 'readonly'
					"
					name="substituteMaintenanceRent">
					<AInput
						:state="
							state == 'readonly'
								? 'readonly'
								: state_substituteMaintenanceRent
								? 'write'
								: 'readonly'
						"
						@change="change_substituteMaintenanceRent"
						v-model="currentInfoData.substituteMaintenanceRent"
						type="price"></AInput>
				</FromItem>
				<FromItem
					label="限行替代车"
					:required="true"
					:state="state"
					name="substituteControlLevelType">
					<ARadioGroup
						:dict="{
							list: dict.type.quota_substitute_control_level,
						}"
						:state="state"
						@change="change_substituteControlLevelType"
						v-model="
							currentInfoData.substituteControlLevelType
						"></ARadioGroup>
				</FromItem>
				<FromItem
					v-if="currentInfoData.substituteControlLevelType == '1'"
					label="限行替代车价格（月）"
					:required="true"
					:state="
						state == 'readonly'
							? 'readonly'
							: state_substituteControlRent
							? 'write'
							: 'readonly'
					"
					name="substituteControlRent">
					<AInput
						:state="
							state == 'readonly'
								? 'readonly'
								: state_substituteControlRent
								? 'write'
								: 'readonly'
						"
						@change="change_substituteControlRent"
						v-model="currentInfoData.substituteControlRent"
						type="price"></AInput>
				</FromItem>
				<!-- <FromItem -->
				<!-- label="事故替车" -->
				<!-- :required="true" -->
				<!-- :state="state" -->
				<!-- name="substituteRoutineLevelType"> -->
				<!-- <ARadioGroup -->
				<!-- :dict="{ -->
				<!-- list: dict.type.quota_substitute_routine_level, -->
				<!-- }" -->
				<!-- :state="state" -->
				<!-- v-model=" -->
				<!-- currentInfoData.substituteRoutineLevelType -->
				<!-- "></ARadioGroup> -->
				<!-- </FromItem> -->
			</uni-forms>
		</div>
	</div>
</template>

<script>
	import * as app from '@/api/index.js';
	import * as apis from '@/api/quota/apply/api.js';
	import FromItem from '../formItem/index.vue';
	export default {
		name: '',
		components: { FromItem },
		dicts: [
			'quota_substitute_control_level',
			'quota_substitute_routine_level',
		],
		props: {},
		inject: [
			'details_provide',
			'config_provide',
			'deptList_provide',
			'state_provide',
			'index_provide',
			'planDicts_provide',
			'fromtype_provide',
		],
		data() {
			return {
				dictList: {
					substituteMaintenanceLevel: [
						{
							label: '是',
							value: '1',
						},
						{
							label: '否',
							value: '2',
						},
					],
				},
			};
		},
		computed: {
			details() {
				return this.details_provide();
			},
			config() {
				return this.config_provide();
			},
			deptList() {
				return this.deptList_provide();
			},
			fromtype() {
				return this.fromtype_provide();
			},
			planDicts() {
				return this.planDicts_provide();
			},
			state() {
				return this.state_provide();
			},
			index() {
				return this.index_provide();
			},
			currentInfoData() {
				return this.details.productList?.[this.index];
			},
			firstInfoData() {
				return this.details.productList?.[0];
			},
			state_substituteMaintenanceRent() {
				return (
					this.config?.quotationProductSchemeRule
						?.openReplacementFeeModification == 1
				);
			},
			state_substituteControlRent() {
				return (
					this.config?.quotationProductSchemeRule
						?.openReplacementFeeModification == 1
				);
			},
		},
		watch: {},
		filters: {},
		created() {},
		mounted() {},
		methods: {
			change_substituteMaintenanceLevel({ val }) {
				if (val == '2') {
					this.currentInfoData.substituteMaintenanceLevelType =
						undefined;
					this.currentInfoData.substituteMaintenanceRent = undefined;
					this.currentInfoData.planConf.substituteMaintenanceRent_state =
						'';
				}
			},
			change_substituteMaintenanceRent(val) {
				if (this.notEmpty(val)) {
					this.currentInfoData.planConf.substituteMaintenanceRent_state =
						'changed';
				} else {
					this.currentInfoData.planConf.substituteMaintenanceRent_state =
						'';
				}
			},
			change_substituteControlLevelType() {
				if (this.currentInfoData.substituteControlLevelType == '2') {
					this.currentInfoData.substituteControlRent = undefined;
					this.currentInfoData.planConf.substituteControlRent_state =
						'';
				}
			},
			change_substituteControlRent(val) {
				if (this.notEmpty(val)) {
					this.currentInfoData.planConf.substituteControlRent_state =
						'changed';
				} else {
					this.currentInfoData.planConf.substituteControlRent_state =
						'';
				}
			},
		},
		beforeDestroy() {
			if (this.notEmpty(this.details?.productList?.[this.index])) {
				this._resetFields([
					{
						data: this.currentInfoData,
					},
				]);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		// margin: 20rpx;
		// padding: 20rpx;
		padding-top: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
		.title {
			border-bottom: 1px solid #e9e9e9;
			font-weight: 500;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
		}
	}
</style>
